<template>
    <div>
        <div class="back-btn" style="color:#ddd" @click="$router.back()">
            <span class="mui-icon mui-icon-arrowleft"></span>
        </div>
        <nav class="mui-bar mui-bar-tab" style="position:stick; bottom:-1px">
            <a class="mui-tab-item mui-badge-danger" @click="Buy">
                <span style="color:white">立刻购买</span>
            </a>
            <a class="mui-tab-item" @click="addCart">
                <span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
                <span>加入购物车</span>
            </a>
        </nav>
    </div>
</template>

<script>

import Vue from 'vue'
import mui from "../../../mui/js/mui.js"
export default {
    data() {
        return {
            BuySuccess:false,
        }
    },
    methods: {
        addCart(){
            localStorage.setItem(this.$route.params.id,"购物车")
            this.BuySuccess=true
            if (this.BuySuccess) {
                mui.toast('添加成功', { type: 'success' })
            } else {
                mui.toast('请稍后再试', { type: 'error' })
            }
        },
        Buy(){
            if (1) {
                mui.toast('购买成功', { type: 'success' })
            } else {
                mui.toast('请稍后再试', { type: 'error' })
            }
        }
    },
}
</script>

<style scoped>
* {
    touch-action: pan-y;
}

.back-btn {
    position: fixed;
    left: 18px;
    top: 18px;
    z-index: 9999;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(10, 10, 10, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mui-toast-container {
    color: #fff;
    background-color: #fff;
}

.mui-toast-container.success {
    background-color: #4cd964;
}

.mui-toast-container.error {
    background-color: #ff3b30;
}
</style>
